<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="_getList"
    :columns="columns"
    hidePagination
    :onValuesChange="onChange"
    searchText="统计"
  >
    <template #operation="{ record }">
      <b-button
        @click="() => onView(record)"
        type="link"
        icon="detail"
        v-if="record.allDevice"
        >详情</b-button
      >
    </template>
  </ProTable>

  <FormModal :items="items">
    <template #after-content>
      <div class="form_container">
        <div class="right">
          <ProTable
            ref="tableRef"
            :formCol="{ md: 24, lg: 18 }"
            :btnCol="{ md: 24, lg: 6 }"
            :fetchListApi="_getInfo"
            :columns="infoColumns"
            :onValuesChange="changeFormState"
          >
            <template #leftContent>
              <div class="left">
                <div class="title">
                  <img src="@/assets/images/statistics.svg" alt="" />
                  <span>统计</span>
                </div>
                <div class="content">
                  <div class="left_items">
                    <span>项目名称</span>
                    <span>数量</span>
                  </div>
                  <div
                    v-for="(value, key) in projectAll"
                    :key="key"
                    class="left_items"
                  >
                    <span>{{ key }}</span>
                    <span>{{ value }}</span>
                  </div>
                </div>
              </div>
            </template>
            <template #toolbars>
              <Space>
                <div></div>
              </Space>
              <Space>
                <!-- <div class="title">设备列表</div> -->
              </Space>
            </template>
          </ProTable>
        </div>
      </div>
    </template>
  </FormModal>
</template>

<script lang="tsx" setup>
import { computed, ref } from 'vue';
import { Descriptions, DescriptionsItem, Input, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import { ProFormProps } from '@/components/ProForm';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { useFormModal } from '@/hooks/formModal';
import { isEmptyObject, listToEnum } from '@/utils/utils';
import { getModel } from '@/api/device';
import { getModelInfoById } from '@/api/push';
import { getDetailList, getList, getProjectDetailList } from '@/api/statistics';
import CustomTree from '../components/customTree.vue';
import { reportStore } from '../store';

const variable = ref(1);
const onChange = async (params: any, formState: any) => {
  if (params.hasOwnProperty('time')) {
    variable.value = params['time'];
  }
  if (params.hasOwnProperty('deviceType')) {
    if (params.deviceType) {
      formState.modelId = undefined;
      const res = await getModelInfoById({
        type: params.deviceType,
        modelIds: '',
      });
      modListEnum.value = listToEnum(res.data, 'modelId', 'model');
    } else {
      modListEnum.value = {};
    }
  }
};

const changeFormState = async (params: any, formState: any) => {
  if (params.hasOwnProperty('deviceType')) {
    formState.modelId = undefined;
    if (params.deviceType) {
      const res = await getModelInfoById({
        type: params.deviceType,
        modelIds: '',
      });
      _modListEnum.value = listToEnum(res.data, 'modelId', 'model');
    } else {
      _modListEnum.value = {};
    }
  }
};
const projectAll: any = ref({});

const {
  refreshStore,
  deviceModeOptions,
  deviceModeEnum,
  getModelOptions,
  getModelEnum,
  projectList,
} = reportStore();
const modListEnum = ref<Record<string, any>>({});
const _modListEnum = ref<Record<string, any>>({});
//const modListAllEnum = ref<Record<string, any>>({});
const init = () => {
  refreshStore.timeDelay();
  // modListEnum.value = getModelEnum.value;
  // modListAllEnum.value = getModelEnum.value;
  // getModel().then((res: any) => {
  //   modListEnum.value = listToEnum(res.data, 'modelId', 'model');
  //   modListAllEnum.value = listToEnum(res.data, 'modelId', 'model');
  // });
};

init();
const { FormModal, open } = useFormModal({
  size: 'middle',
  formProps: {
    wrapperCol: { span: 24 },
  },
});

const _getList = async (queryParams: any) => {
  const startTime = dayjs().subtract(variable.value, 'minutes').valueOf();
  const endTime = dayjs().valueOf();
  const res: any = await getList(startTime, endTime, queryParams);
  return {
    rows: res.data,
    total: res.data.length,
  };
};
const codes = ref();

const _getInfo = async (queryParams: any) => {
  queryParams.codes = codes.value;
  const res: any = await getDetailList(queryParams);
  const { rows, total } = res;
  const result = await getProjectDetailList(queryParams);
  console.log(result.data, 'result.data');

  projectAll.value = result.data;
  return {
    rows,
    total,
  };
};
const infoColumns = computed<ProTableProps['columns']>(() => [
  {
    title: '项目名称',
    dataIndex: 'projectName',
    hideInSearch: true,
  },
  {
    title: '项目名称',
    dataIndex: 'projectId',
    hideInTable: true,
    customSearchRender(formState) {
      const onChangeForTree = (value: any) => {
        formState['projectId'] = value;
      };
      return (
        <CustomTree
          filed='projectId'
          formState={formState}
          data={projectList.value}
          onChange={onChangeForTree}
        ></CustomTree>
      );
    },
  },
  {
    title: '设备序列号',
    hideInSearch: true,
    dataIndex: 'deviceCode',
  },
  {
    title: '设备序列号',
    dataIndex: 'code',
    hideInTable: true,
    customSearchRender(formState) {
      const onChange = (event: any) => {
        const valueWithoutSpaces = event.target.value.replace(/\s/g, '');
        formState.code = valueWithoutSpaces;
      };
      return <Input v-model:value={formState.code} onChange={onChange}></Input>;
    },
  },
  {
    title: '设备类型',
    dataIndex: 'deviceType',
    valueEnum: {
      ...deviceModeEnum.value,
    },
  },
  {
    title: '设备型号',
    dataIndex: 'deviceModel',
    hideInSearch: true,
    valueEnum: {
      ...getModelEnum.value,
    },
  },
  {
    title: '设备型号',
    dataIndex: 'modelId',
    hideInTable: true,
    valueEnum: isEmptyObject(_modListEnum.value)
      ? {
          ...getModelEnum.value,
        }
      : { ..._modListEnum.value },
  },
  {
    title: '地址',
    dataIndex: 'address',
    hideInSearch: true,
  },
  {
    title: '服务实际延时(s)',
    dataIndex: 'timeDelay',
    hideInSearch: true,
  },
]);
const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '延时选择',
    dataIndex: 'time',
    hideInTable: true,
    defaultValue: '1',
    valueEnum: {
      1: '近1分钟延时',
      2: '近5分钟延时',
      3: '近30分钟延时',
      4: '近1小时延时',
    },
    hideClear: true,
  },
  {
    title: '项目名称',
    dataIndex: 'projectId',
    hideInTable: true,
    customSearchRender(formState) {
      const onChangeForTree = (value: any) => {
        formState['projectId'] = value;
      };
      return (
        <CustomTree
          filed='projectId'
          formState={formState}
          data={projectList.value}
          onChange={onChangeForTree}
        ></CustomTree>
      );
    },
  },
  {
    title: '设备类型',
    dataIndex: 'deviceType',
    hideInTable: true,
    valueEnum: {
      ...deviceModeEnum.value,
    },
  },
  {
    title: '设备型号',
    dataIndex: 'modelId',
    hideInSearch: true,
    hideInTable: true,
    valueEnum: {
      ...getModelEnum.value,
    },
  },
  {
    title: '设备型号',
    dataIndex: 'modelId',
    hideInTable: true,
    valueEnum: isEmptyObject(modListEnum.value)
      ? {
          ...getModelEnum.value,
        }
      : { ...modListEnum.value },
  },

  {
    title: '延时分类',
    dataIndex: 'category',
    hideInSearch: true,
  },
  {
    title: '台站数',
    dataIndex: 'count',
    hideInSearch: true,
  },
  {
    title: '设备序列号',
    dataIndex: 'device',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    width: 240,
  },
]);

const items = computed<ProFormProps['items']>(() => []);

const onView = async (record: any) => {
  codes.value = record.device;
  open({
    title: '详情',
    modalType: 'info',
    defaultValue: {
      ...record,
    },
    hideFooter: true,
    serviceApi: async (params: any): Promise<any> => {},
  });
};
</script>

<style lang="scss" scoped>
:deep(.ant-descriptions).ant-descriptions-bordered .ant-descriptions-row {
  // border: 1px solid rgba(242, 242, 242, 0.2);
}
.form_container {
  display: flex;
  justify-content: space-between;
  :deep(.ant-table-wrapper) {
    max-width: calc(100% - 240px) !important;
  }
  .left {
    flex: none;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px 0px 15px 20px;
    border-radius: 6px;
    flex: 1;
    margin-right: 20px;
    min-width: 240px;
    .title {
      display: flex;
      margin-bottom: 10px;
      span {
        margin-left: 8px;
      }
    }
    .content {
      padding-right: 20px;
      height: calc(50vh - 120px);
      overflow-y: auto;
    }
    .left_items {
      display: flex;
      justify-content: space-between;
      padding: 10px 5px 10px 0;
      border-bottom: 1px solid rgba(242, 242, 242, 0.2);
    }
  }
  .right {
    min-width: 450px;
    flex: 3;
    :deep(.ant-table) {
      height: calc(50vh - 60px);
    }
    :deep(.ant-table-body) {
      height: calc(50vh - 100px);
    }
  }
}
:deep(.ant-descriptions-item-label) {
  white-space: nowrap;
}
</style>
